import React, { Component } from 'react';
import Style from './index.module.scss';
import StudyTimeLineModel from '../../../../models/studyTimeLine'
import { Timeline } from 'antd';
import { Divider } from 'antd';

interface StateInterface {
  dataArr: Array<StudyTimeLineModel>
}

interface PropsInterface {
}

class WebHomeStudyTimeLine extends Component<PropsInterface, StateInterface> {

  state: Readonly<StateInterface> = {
    dataArr: []
  }

  componentDidMount() {
    this.getAllModel()
  }

  getAllModel() {
    StudyTimeLineModel.getModels().then((data: any) => {
      this.setState(() => {
        return {
          dataArr: data
        }
      })
    }).catch(() => { })
  }

  render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
    return (
      <div className={`w-content-box ${ Style['study-time-line'] }`}>
        <br />
        <Divider>学习时间线</Divider>
        <Timeline>
          {
            this.state.dataArr.map((item: StudyTimeLineModel) => {
              return (
                <Timeline.Item key={item._id}>
                  <p>
                    <span className={ Style.time }>{item.dateStr}</span>
                    <span className={ Style.title }>{ item.title }</span>
                  </p>
                  <p className={ Style.content }>{ item.content }</p>
                </Timeline.Item>
              )
            })
          }
        </Timeline>
      </div>
    );
  }
}

export default WebHomeStudyTimeLine;
